<template>
  <Sider width="240" class="zlst-list--inline">
    <h3>基础字段</h3>
    <draggable element="ul" :list="basicWidgets" :options="draggableOpts" :clone="cloneHandler">
      <li v-for="(item, index) in basicWidgets" :key="index">
        <a>
          <icon class="icon" :name="item.icon" />
          <span>{{ item.name }}</span>
        </a>
      </li>
    </draggable>

    <h3>高级字段</h3>
    <draggable element="ul" :list="advanceWidgets" :options="draggableOpts" :clone="cloneHandler">
      <li v-for="(item, index) in advanceWidgets" :key="index">
        <a>
          <icon class="icon" :name="item.icon" />
          <span>{{ item.name }}</span>
        </a>
      </li>
    </draggable>

    <h3>布局字段</h3>
    <draggable element="ul" :list="layoutWidgets" :options="draggableOpts" :clone="cloneHandler">
      <li v-for="(item, index) in layoutWidgets" :key="index">
        <a>
          <icon class="icon" :name="item.icon" />
          <span>{{ item.name }}</span>
        </a>
      </li>
    </draggable>
  </Sider>
</template>

<script>
import Draggable from 'vuedraggable'
import _ from 'lodash'
import uuidv4 from 'uuid/v4'
import Icon from 'vue-awesome/components/Icon'
import 'vue-awesome/icons/regular/keyboard'
import 'vue-awesome/icons/regular/trash-alt'
import 'vue-awesome/icons/regular/clone'
import 'vue-awesome/icons/regular/dot-circle'
import 'vue-awesome/icons/regular/check-square'
import 'vue-awesome/icons/bars'
import 'vue-awesome/icons/regular/calendar-alt'
import 'vue-awesome/icons/regular/clock'
import 'vue-awesome/icons/th'
import 'vue-awesome/icons/sort-numeric-up'
import 'vue-awesome/icons/regular/star'
import 'vue-awesome/icons/palette'
import 'vue-awesome/icons/regular/caret-square-down'
import 'vue-awesome/icons/toggle-off'
import 'vue-awesome/icons/sliders-h'
import 'vue-awesome/icons/regular/image'
import 'vue-awesome/icons/chalkboard'
import { basicWidgets, advanceWidgets, layoutWidgets } from './setting/widget-bar.js'

export default {
  components: {
    Draggable,
    Icon
  },
  data () {
    return {
      basicWidgets,
      advanceWidgets,
      layoutWidgets,
      list: [],
      draggableOpts: {
        group: {
          name: 'widgets',
          pull: 'clone',
          put: false
        },
        sort: false,
        ghostClass: 'ghost'
      }
    }
  },
  methods: {
    cloneHandler (value) {
      const clone = _.cloneDeep(value)
      clone.id = uuidv4()
      return clone
    }
  }
}
</script>
